<template>
	<view class="container">
		<view class="myorder_top">
			<view class="sscontent">
				<view class="ssbox">
					<view class="iconfont icon-sousuo"></view><input class="ssinp" type="text" confirm-type="search"
						@confirm="search" @input="ikeyword" placeholder="搜索姓名、项目、门店名、订单编号" />
				</view>
			</view>
			<view class="myorder_tit">
				<view class="myorder_tul">
					<view class="myorder_tli" :class="status==-1?'active':''" @click="qiehuan" :data-v="-1">全部
					</view>
					<view class="myorder_tli" :class="status==0?'active':''" @click="qiehuan" :data-v="0">待付款</view>
					<view class="myorder_tli" :class="status==1?'active':''" @click="qiehuan" :data-v="1">待服务</view>
					<view class="myorder_tli" :class="status==2?'active':''" @click="qiehuan" :data-v="2">已完成</view>
					<view class="myorder_tli" :class="status==3?'active':''" @click="qiehuan" :data-v="3">退货/售后</view>
				</view>
			</view>
		</view>
		<!--没有信息的时候显示-->
		<view class="myorder_no" v-if="rows.length==0">暂无相关信息</view>
		<!--没有信息的时候显示end-->

		<view class="myorder_list" v-for="(item,index) in rows" :key="item.id">
			<view class="myorder_ct">
				<view class="myorder_tfl">{{item.shopname}}</view>
				<view class="myorder_tfr">{{item.txt}}</view>
			</view>
			<navigator hover-class="none" :url="'/pages/user/myorderdetail/myorderdetail?orderid='+item.orderid">
				<view class="myorder_ct">
					<view class="pro_dl">
						<view class="pro_dt">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="pro_dd">
							<view class="pro_title">{{item.name}}</view>
							<view class="pro_lable">{{item.catename}}</view>
							<view class="pro_bottom">
								<view class="pro_price">￥{{item.price}}</view>
								<view class="pro_num">x{{item.num}}</view>
							</view>
						</view>
					</view>
				</view>
			</navigator>
			<view class="myorder_ct border0">
				<view class="myorder_zfl">合计：<text>￥{{item.total}}</text></view>
				<view class="myorder_zfr">
					<view class="myorder_btn" v-if="item.status==0" @click="quxiao" :data-orderid="item.orderid">取消订单
					</view>
					<view class="myorder_btn red" v-if="item.status==0" @click="topay" :data-index="index">去支付
					</view>
					<view class="myorder_btn" v-if="item.status==1" @click="tuik" :data-orderid="item.orderid">退款
					</view>
					<view class="myorder_btn" v-if="item.status>1" @click="detail" :data-orderid="item.orderid">查看详情
					</view>
					<view class="myorder_btn red" v-if="item.status==1" @click="hexiao" :data-orderid="item.orderid">核销
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import API from "@/common/api.js";
	//#ifdef WEB
	import jweixin from 'weixin-js-sdk'
	//#endif
	export default {
		data() {
			return {
				keyword: "",
				status: -1,
				page:1,
				rows: []
			}
		},
		onLoad(options) {
			if (options.status != undefined) {
				this.status = options.status
			}
			this.search()
		},
		onReachBottom(){
			this.search(1)
		},
		methods: {
			tuik(e) {
				var $this = this
				var orderid = e.currentTarget.dataset.orderid;
				uni.showModal({
					title: '提示',
					content: '确认要退款吗？',
					success: function(res) {
						if (res.confirm) {
							API.post("order/myorder_refund", {
								orderid: orderid
							}).then((res) => {
								if (res.code == 1) {
									API.showModal(res.msg)
									$this.search()
								} else {
									API.showModal(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			topay(e) {
				var $this = this
				var index = e.currentTarget.dataset.index;
				//#ifdef WEB
				var json = {
					orderid: $this.rows[index].orderid,
					paytype: 'mp'
				}
				uni.showModal({
					title: '提示',
					content: '确认要支付' + $this.rows[index].total + "元？",
					success: function(res) {
						if (res.confirm) {
							API.post("order/retopay", json).then((res) => {
								if (res.code == 1) {
									jweixin.config({
										debug: false,
										appId: res.data.appId, // 必填，公众号的唯一标识
										timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
										nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
										signature: res.data.paySign, // 必填，签名
										jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表	
									});
									jweixin.ready(() => {
										jweixin.chooseWXPay({
											appId: res.data.appId, // 必填，公众号的唯一标识
											timestamp: res.data.timeStamp,
											nonceStr: res.data
												.nonceStr, // 支付签名随机串，不长于 32 位
											package: res.data
												.package, // 统一支付接口返回的prepay_id参数值
											signType: res.data
												.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
											paySign: res.data.paySign, // 支付签名
											success: function(res) { //支付成功回调
												API.showModal(res.msg,
													"/pages/user/myorder/myorder"
												)
											},
											cancel: function(res) {
												uni.showToast({
													title: '取消支付',
													icon: 'none',
													duration: 2000,
												})
											},
											fail: function(res) {
												console.log("fail", res);
												uni.showToast({
													title: '支付失败',
													icon: 'none',
													duration: 2000,
												})
											}
										});
									});
								} else {
									API.showModal(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				//#endif
				// #ifdef MP-WEIXIN
				uni.showModal({
					title: '提示',
					content: '确认要支付' + $this.rows[index].total + "元？",
					success: function(res) {
						if (res.confirm) {
							API.post("order/retopay", {
								orderid: $this.rows[index].orderid,
								paytype: 'miniapp'
							}).then((res) => {
								if (res.code == 1) {
									uni.requestPayment({
										'timeStamp': res.data.timeStamp,
										'nonceStr': res.data.nonceStr,
										'package': res.data.package,
										'signType': 'MD5',
										'paySign': res.data.paySign,
										'success': function(res) {
											API.showModal(res.msg,
												"/pages/user/myorder/myorder")
										},
										'fail': function(res) {}
									})

								} else {
									API.showModal(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// #endif
			},
			detail(e) {
				var orderid = e.currentTarget.dataset.orderid;
				uni.navigateTo({
					url: "/pages/user/myorderdetail/myorderdetail?orderid=" + orderid
				})
			},
			hexiao(e) {
				var orderid = e.currentTarget.dataset.orderid;
				uni.navigateTo({
					url: "/pages/user/myorderuse/myorderuse?orderid=" + orderid
				})
			},
			quxiao(e) {
				var orderid = e.currentTarget.dataset.orderid;
				var $this = this
				uni.showModal({
					title: '',
					content: "确定删除订单吗？",
					success: function(res) {
						if (res.confirm) {
							API.post("order/delorder", {
								orderid: orderid
							}).then((res) => {
								if (res.code == 1) {
									API.showModal(res.msg)
									$this.search()
								} else {
									API.showToast(res.msg)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			search(more=0) {
				//more=1的时候是分页
				var $this = this
				API.post("order/myorder", {
					keyword: this.keyword,
					status: this.status,
					page:this.page
				}).then((res) => {
					if (res.code == 1) {
						if(res.data.length>0){
							$this.page = $this.page+1
						}else if($this.page>1){
							API.showToast("没有更多了")
						}
						if(more==1){
							var rows=$this.rows
							for(var i=0;i<res.data.length;i++){
								rows.push(res.data[i])
							}
							$this.rows=rows
						} else {
							$this.rows = res.data
						}
					}
				})
			},
			qiehuan(e) {
				var v = e.currentTarget.dataset.v;
				this.status = v
				this.page=1
				this.search()
			},
			ikeyword(e) {
				this.keyword = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.container {
		padding: 214rpx 0 40rpx;
	}

	.myorder_top {
		position: fixed;
		top: var(--window-top);
		left: 0;
		right: 0;
		background: #fff;
		z-index: 2;
		box-shadow: 0px 8rpx 16rpx 0px rgba(0, 0, 0, 0.02);
	}

	.sscontent {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
	}

	.ssbox {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		background: #f6f7f9;
		color: #222;
		font-size: 28rpx;
		position: relative;
		padding: 0 22rpx 0 92rpx;
		border: 2rpx #eee solid;
	}

	.ssbox .iconfont {
		position: absolute;
		top: 0;
		left: 36rpx;
		font-size: 44rpx;
		color: #999;
	}

	.ssinp {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #444;
		font-size: 30rpx;
	}

	.myorder_tit {
		width: 100%;
		overflow: hidden;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.myorder_tul {
		width: 100%;
		padding: 0 28rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.myorder_tli {
		text-align: center;
		position: relative;
	}

	.myorder_tli.active {
		color: $color;
	}

	.myorder_tli.active:before {
		content: "";
		width: 60rpx;
		height: 4rpx;
		background: $color;
		line-height: 0;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}

	.myorder_no {
		width: 100%;
		overflow: hidden;
		margin-top: 150rpx;
		text-align: center;
		color: #999;
	}

	.myorder_list {
		padding: 0 30rpx;
		overflow: hidden;
		background: #fff;
		margin: 20rpx 0 0;
		box-sizing: border-box;
	}

	.myorder_ct {
		padding: 30rpx 0;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.myorder_ct {
		border-bottom: 2rpx #eee solid;
	}

	.myorder_ct.border0 {
		border-bottom-width: 0;
	}

	.myorder_tfl {
		color: #666;
		float: left;
		font-size: 32rpx;
		font-weight: bold;
	}

	.myorder_tfr {
		float: right;
		color: $color;
		font-size: 30rpx;
		font-weight: bold;
	}

	.myorder_zfl {
		float: left;
		line-height: 64rpx;
		font-size: 28rpx;
	}

	.myorder_zfl text {
		font-weight: bold;
		font-size: 32rpx;
	}

	.myorder_zfr {
		float: right;
	}

	.myorder_btn {
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 20rpx;
		width: 158rpx;
		text-align: center;
		border-radius: 10rpx;
		background: no-repeat;
		font-size: 28rpx;
		border: 2rpx #ddd solid;
		color: #888;
		float: left;
	}

	.myorder_btn.red {
		color: $color;
		border-color: #477efe;
	}

	.pro_dl {
		width: 100%;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.pro_dl:last-child {
		margin-bottom: 0;
	}

	.pro_dt {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: Center;
		float: left;
	}

	.pro_dt image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.pro_dd {
		padding-left: 210rpx;
	}

	.pro_title {
		line-height: 44rpx;
		font-size: 30rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pro_lable {
		color: #999;
		margin-top: 10rpx;
	}

	.pro_bottom {
		margin-top: 50rpx;
	}

	.pro_price {
		float: left;
		font-size: 30rpx;
	}

	.pro_num {
		float: right;
		color: #999;
	}

	/* #ifdef H5 */
	.myorder_top {
		top: 0;
	}

	/* #endif */
</style>